<template>
	<div class="goods-search" id="goods-search">
		<van-search v-model="keyWord" show-action placeholder="搜索商品名称、链接" @search="onSearch" @input="onInput">
			<div slot="action" @click="onSearch">搜索</div>
		</van-search>

		<!-- 步骤图 -->
		<img class="goods-step" src="@/assets/images/index/search/step.png" alt />

		<!-- 搜索历史 -->
		<div class="comm-search history" v-if="historyList.length > 0">
			<div class="title">
				<span class="left">搜索历史</span>
				<div class="clear">
					<span @click="isShowClear = false" v-if="isShowClear">完成</span>
					<van-icon name="delete" size="20" @click="delHistory" />
				</div>
			</div>
			<div class="tag-box history" :class="[{ 'drop-down': dropDown }]">
				<div class="history-list" id="history">
					<template v-for="(item, index) in historyList">
						<div
							class="tag"
							:class="[{ clear: isShowClear }]"
							:key="index"
							@click="toResult(item)"
							@touchstart="goTouchStart"
							v-if="index < 20"
						>
							<p>{{ item }}</p>
							<van-icon name="clear" @click.stop="removeTag(item)" v-if="isShowClear" />
						</div>
					</template>
				</div>

				<van-icon class="arrow" name="arrow-up" size="20" v-if="isShowDrop" @click="dropDown = !dropDown" />
			</div>
		</div>

		<!-- 热门搜索 -->
		<div class="comm-search hot">
			<div class="title">
				<span class="left">热门搜索</span>
			</div>
			<div class="tag-box">
				<template v-for="(item, index) in hotKeyList">
					<div class="tag hot-tag" v-if="index === 0" :key="index" @click="toResult(item.keyword)">
						<i class="iconfont icon-remenwenti"></i>
						{{ item.keyword }}
					</div>
					<div class="tag" v-else :key="index" @click="linkSearch(item.keyword)">
						{{ item.keyword }}
					</div>
				</template>
			</div>
		</div>
		<!-- 搜索联想 -->
		<div class="link" v-if="keyWord">
			<div class="li" v-for="(item, index) in suggestionList" :key="index" @click="linkSearch(item)">{{ item }}</div>
		</div>
	</div>
</template>

<script>
import store from 'store';
import { Search } from 'vant';

export default {
	name: 'goods-search',
	components: {
		'van-search': Search
	},
	data() {
		return {
			dropDown: false,
			isShowDrop: false,
			timeOutEvent: null,
			isShowClear: false,
			keyWord: '',
			historyList: [],
			hotKeyList: [],
			suggestionList: []
		};
	},
	created() {
		this.getHotKey();
		this.getHistoryList();
	},

	mounted() {
		if (this.historyList.length > 0) {
			let offsetHeight = document.getElementById('history').offsetHeight;
			if (offsetHeight > 85) {
				this.isShowDrop = true;
			}
		}

		if (document.documentElement.scrollTop > 0) {
			document.documentElement.scrollTop = 0;
		}
		if (document.body.scrollTop > 0) {
			document.body.scrollTop = 0;
		}

		document.getElementById('goods-search').style.height = document.documentElement.clientHeight + 'px';
	},
	methods: {
		linkSearch(keyWord) {
			if (keyWord) {
				this.keyWord = keyWord;
			}
			this.onSearch();
		},
		onSearch() {
			if (!this.keyWord) {
				this.$toast('请输入搜索关键词');
				return false;
			}

			// 完成任务
			this.$store.dispatch('finishTask', { sceneKey: this.$route.query.sceneKey });

			this.setHistoryList(this.keyWord);
			store.set('keyWord', this.keyWord);
			this.$router.push({
				path: '/goods-result'
			});
		},
		onInput(keyWord) {
			let params = {
				keyWord: keyWord
			};
			this.$service.shopping.goods.searchSuggestion(params).then(res => {
				this.suggestionList = res;
			});
		},
		// 获取本地搜索记录
		getHistoryList() {
			this.historyList = store.get('historyList') || [];
		},
		// 获取搜索热词
		getHotKey() {
			this.$service.shopping.goods.hotKey().then(res => {
				this.hotKeyList = res;
				// 随机取20个数组
				this.randomArray();
			});
		},
		// 数组随机提取
		randomArray() {},
		// 存储本地搜索记录
		setHistoryList(param) {
			if (this.historyList.includes(param)) return; //去重
			this.historyList.unshift(param);
			store.set('historyList', this.historyList);
		},
		//清空历史搜索
		delHistory() {
			this.historyList = [];
			store.set('historyList', this.historyList);
		},
		// 长按开始
		goTouchStart() {
			clearTimeout(this.timeOutEvent); // 清除定时器
			this.timeOutEvent = 0;
			this.timeOutEvent = setTimeout(() => {
				//执行长按要执行的内容
				this.isShowClear = true;
				// 重新计算高度
				let offsetHeight = document.getElementById('history').offsetHeight;
				if (offsetHeight > 85) {
					this.dropDown = true;
				}
			}, 1000);
		},
		// 移除tag
		removeTag(tag) {
			this.historyList = this.historyList.filter(item => {
				if (tag === item) {
					return false;
				}
				return true;
			});
			store.set('historyList', this.historyList);
			// 重新计算高度
			setTimeout(() => {
				let offsetHeight = document.getElementById('history').offsetHeight;
				if (offsetHeight <= 85) {
					this.isShowDrop = false;
				}
			}, 100);
		},
		toResult(keyWord) {
			store.set('keyWord', keyWord);
			this.$router.push('/goods-result');
		}
	},
	watch: {
		keyWord() {
			// 调用联动接口
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-search {
	min-height: 100%;
	background-color: $color-white;
	/deep/.van-search {
		padding: 20px 0px;
		padding-left: 54px;
		.van-search__content {
			border: 2px solid $main-color;
			border-radius: 32px;
			padding-left: 40px;
			background: #f8f8f8;
			.van-field__left-icon {
				display: none;
			}
		}
		.van-search__action {
			padding: 0 18px;
			font-size: 28px;
			color: $main-color;
		}
		input {
			color: $text-black;
		}
		input::placeholder {
			font-size: 26px;
			color: #909090;
		}
	}
	.goods-step {
		display: block;
		margin: 0 auto 44px;
		width: 704px;
		height: 178px;
	}
	.comm-search {
		padding: 0 40px;
		.title {
			margin-bottom: 30px;
			@include flexBox(space-between, center, row);
			.left {
				font-weight: bold;
				color: #171717;
				font-size: 28px;
			}
		}
		.tag-box {
			@include flexBox(flex-start, flex-start, row, wrap);
			transition: 0.5s;
			&.history {
				position: relative;
				max-height: 140px;
				overflow: hidden;
				transition: 0.5s;
				.arrow {
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -30px;
					transition: 0.5s;
					color: #949494;
					transform: rotate(180deg);
				}
			}
			.history-list {
				width: 92%;
				@include flexBox(flex-start, center, row, wrap);
			}
			&.drop-down {
				max-height: unset;
				height: auto;
				.arrow {
					transform: rotate(0deg);
				}
			}
			.tag {
				background-color: #f2f1f6;
				text-align: center;
				max-width: 180px;
				min-width: 130px;
				height: 52px;
				font-size: 20px;
				color: #171717;
				line-height: 52px;
				border-radius: 26px;
				margin: 0 20px 20px 0;
				padding: 0 30px;
				transition: 0.5s;
				position: relative;
				@include ellipsis(1);
				@include flexBox(center, center);
				&.clear {
					padding-right: 50px;
				}
				p {
					width: 100%;
					overflow: hidden;
					@include ellipsis(1);
				}
				p::selection {
					background: none;
				}
				i {
					line-height: 52px;
				}
				.van-icon-clear {
					opacity: 0.8;
					position: absolute;
					right: 20px;
					padding-top: 2px;
				}
			}
			.hot-tag {
				background-color: #fbebec;
				color: #f63e4c;
				.icon-remenwenti {
					color: #ff204b;
					margin-right: 10px;
				}
			}
		}
	}
	.history {
		margin-bottom: 60px;
		.title {
			@include flexBox(space-between, center);
			.clear {
				color: $text-grey;
				font-size: 22px;
				@include flexBox(center, center);
				i {
					color: #949494;
					font-size: 34px !important;
					margin-left: 10px;
				}
			}
		}
	}
	.hot {
	}
	.link {
		width: 100%;
		height: calc(100% - 100px);
		background-color: white;
		position: fixed;
		top: 104px;
		left: 0;
		padding: 0 34px;
		overflow: auto;
		.li {
			height: 84px;
			font-size: 26px;
			line-height: 84px;
			border-bottom: 2px solid #ebebeb;
		}
	}
}
</style>
